import React from "react";
import { RootDispatch, RootState, MapStateFromStoreProps, MapDispatchFromStoreProps, RouterProps } from "@src/store";
import { connect } from "@store/connect";
import { UserOutlined, UnlockOutlined } from "@ant-design/icons";
import { Input, Button, Spin } from "antd";
import "./style.css";

function mapStateToProps(state: RootState) {
  const { global, loading } = state;
  return { ...global, ...loading };
}

function mapDispatchToProps(dispatch: RootDispatch) {
  const { global, loading } = dispatch;
  console.log(loading);
  return {
    fetchLogin: global.fetchLogin,
    showLoading: loading.show,
  };
}

/**
 * 组件最终接收的所有 Props 类型声明
 */
type ClassReduxExampleProps = RouterProps &
  MapStateFromStoreProps<typeof mapStateToProps> &
  MapDispatchFromStoreProps<typeof mapDispatchToProps> & {
    routes?: any;
    count?: number;
  };
type ClassReduxExampleState = {};

@connect(mapStateToProps, mapDispatchToProps)
export default class ClassReduxExample extends React.Component<ClassReduxExampleProps, ClassReduxExampleState> {
  login = async () => {
    console.log(this.props);
    const { fetchLogin } = this.props;
    await fetchLogin();
  };

  render() {
    const { global } = this.props;
    return (
      <div className="classReduxExample-page">
        <Spin tip="正在登录..." spinning={global}>
          <div className="li">
            <Input size="large" placeholder="用户名" prefix={<UserOutlined />} />
          </div>
          <div className="li">
            <Input.Password size="large" placeholder="密码" prefix={<UnlockOutlined />} />
          </div>
          <div className="li">
            <Button type="primary" block onClick={this.login}>
              Login
            </Button>
          </div>
        </Spin>
      </div>
    );
  }
}
